<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table>
				<tr>
					<th>编号</th>
					<th>商品名</th>
					<th>价格</th>
					<th>数量</th>
					<th>总价</th>
				</tr>
				<tr v-for="item in this.cartItems">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>{{item.count}}</td>
					<td>{{item.count*item.price}}</td>
				</tr>
				<tr>
					<td>
						总价{{total}}
					</td>
				</tr>
			</table>
			{{message}}
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						cartItems:[
							{id:1001,name:'足球',price:20.0,count:10},
							{id:1002,name:'篮球',price:30.0,count:5},
							{id:1003,name:'乒乓球',price:2.0,count:15},
						]		
					}
				},
				computed: {
					total(){
						all = 0
						for(var i in this.cartItems)
						{
							all += this.cartItem[i].price * this.cartItem[i].count
						}
					}
					
				}
			});
			var vm = app.mount("#app")	
		</script>
	</body>
</html>
